<template>
  <!-- 师傅页面 -->
  <div id="master-page" style=" animation: fadeIn 0.5s;">
    <!-- 顶部状态切换 -->
    <div style="background-color: white; padding: 1rem;">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <h2 style="font-weight: bold; font-size: 1.125rem;">今日接单</h2>
        <div style="display: flex; align-items: center;">
          <span style="color: #737373; margin-right: 0.5rem;">工作状态:</span>
          <label style="position: relative; display: inline-flex; align-items: center; cursor: pointer;">
            <input type="checkbox" value="" style="position: absolute; width: 1px; height: 1px; opacity: 0;" checked>
            <div style="width: 2.75rem; height: 1.5rem; background-color: #e5e7eb; position: relative; border-radius: 9999px; transition: background-color 0.2s; display: flex; align-items: center;">
              <div style="content: ''; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background-color: white; border: 1px solid #d1d5db; border-radius: 9999px;"></div>
            </div>
            <span style="margin-left: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #16a34a;">在线接单</span>
          </label>
        </div>
      </div>
      <div class="order-tabs-container">
        <div class="flex border-b border-gray-200" style="display: flex;">
          <button
              style="border:none !important;"
              v-for="(tab, index) in tabs"
              :key="index"
              :class="activeTab === index ? 'tab-active' : 'tab-inactive'"
              @click="activeTab = index"
          >
            {{ tab.name }}
            <span v-if="activeTab === index" class="tab-indicator"></span>
          </button>
        </div>

        <!-- 标签页内容区域 -->
        <div class="tab-content">
          <!-- 这里可以根据activeTab显示不同内容 -->
          <div v-if="activeTab === 0">全部订单内容区域</div>
          <div v-if="activeTab === 1">待服务内容区域</div>
          <div v-if="activeTab === 2">进行中内容区域</div>
        </div>
      </div>
    </div>

    <!-- 今日统计 -->
    <div style="padding: 0.75rem 1rem; background-color: #f3f4f6;">
      <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;">
        <div style="background-color: white; border-radius: 0.5rem; padding: 0.75rem; text-align: center;">
          <p style="font-size: 0.875rem; color: #9ca3af;">今日接单</p>
          <p style="font-size: 1.5rem; font-weight: bold; color: #3b82f6; margin-top: 0.25rem;">5</p>
        </div>
        <div style="background-color: white; border-radius: 0.5rem; padding: 0.75rem; text-align: center;">
          <p style="font-size: 0.875rem; color: #9ca3af;">已完成</p>
          <p style="font-size: 1.5rem; font-weight: bold; color: #10b981; margin-top: 0.25rem;">3</p>
        </div>
        <div style="background-color: white; border-radius: 0.5rem; padding: 0.75rem; text-align: center;">
          <p style="font-size: 0.875rem; color: #9ca3af;">收入</p>
          <p style="font-size: 1.5rem; font-weight: bold; color: #f97316; margin-top: 0.25rem;">¥850</p>
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div style="padding: 0.75rem 1rem;">
      <div style="display: flex; flex-direction: column; gap: 0.75rem;">
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); padding: 1rem; transition: box-shadow 0.3s ease-in-out;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">地板安装服务</h3>
              <p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">订单编号: OD20250615005</p>
            </div>
            <span style="background-color: #fef9c3; color: #d97706; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;">待服务</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center;">
            <i class="fa-solid fa-map-marker-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span style="font-size: 0.875rem; color: #737373;">北京市海淀区中关村南大街5号</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center;">
            <i class="fa-solid fa-calendar-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span style="font-size: 0.875rem; color: #737373;">预约时间: 2025-06-15 14:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #3b82f6; font-weight: bold;">¥350</span>
              <span style="font-size: 0.875rem; color: #737373;">服务费用</span>
            </div>
            <button style="background-color: #3b82f6; color: white; padding: 0.2rem 0.5rem; border-radius: 0.5rem; font-size: 0.875rem;margin-right: 10px;margin-left: 10px">开始服务</button>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); padding: 1rem; transition: box-shadow 0.3s ease-in-out;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">灯具更换服务</h3>
              <p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">订单编号: OD20250615006</p>
            </div>
            <span style="background-color: #dbeafe; color: #1d4ed8; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;">进行中</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center;">
            <i class="fa-solid fa-map-marker-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span style="font-size: 0.875rem; color: #737373;">北京市朝阳区建国路88号</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center;">
            <i class="fa-solid fa-calendar-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span style="font-size: 0.875rem; color: #737373;">预约时间: 2025-06-15 10:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #3b82f6; font-weight: bold;">¥150</span>
              <span style="font-size: 0.875rem; color: #737373;">服务费用</span>
            </div>
            <button style="background-color: #f3f4f6; color: #4b5563; padding:0.2rem 0.5rem; border-radius: 0.5rem; font-size: 0.875rem;margin-left: 10px;margin-right: 10px">完成服务</button>
          </div>
        </div>
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); padding: 1rem; transition: box-shadow 0.3s ease-in-out;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div>
              <h3 style="font-weight: 500;">卫浴安装服务</h3>
              <p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">订单编号: OD20250615004</p>
            </div>
            <span style="background-color: #dcfce7; color: #16a34a; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px;">已完成</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; align-items: center;">
            <i class="fa-solid fa-map-marker-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span style="font-size: 0.875rem; color: #737373;">北京市丰台区方庄路1号</span>
          </div>
          <div style="margin-top: 0.5rem; display: flex; align-items: center;">
            <i class="fa-solid fa-calendar-alt" style="color: #3b82f6; margin-right: 0.25rem;"></i>
            <span style="font-size: 0.875rem; color: #737373;">预约时间: 2025-06-15 09:00</span>
          </div>
          <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <div>
              <span style="color: #3b82f6; font-weight: bold;">¥350</span>
              <span style="font-size: 0.875rem; color: #737373;">服务费用</span>
            </div>
            <div style="color: #facc15; font-size: 0.875rem; display: flex;">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

// 订单状态选项卡
const activeOrderTab = ref('all');
const tabs = [
  { name: '全部订单', icon: 'fa-list' },
  { name: '待服务', icon: 'fa-clock' },
  { name: '进行中', icon: 'fa-spinner' }
];

const activeTab = ref(0);
// 订单数据
const orders = ref([]);

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    pendingInstallation: '待安装',
    installing: '安装中',
    completed: '已完成',
    cancelled: '已取消'
  };
  return statusMap[status] || '未知状态';
};

// 获取订单状态样式
const getOrderStatusClass = (status) => {
  const classMap = {
    pendingInstallation: 'bg-orange-100 text-orange-600',
    installing: 'bg-blue-100 text-blue-600',
    completed: 'bg-green-100 text-green-600',
    cancelled: 'bg-neutral-100 text-neutral-600'
  };
  return classMap[status] || 'bg-neutral-100 text-neutral-600';
};

// 获取订单操作文本
const getOrderActionText = (status) => {
  const actionMap = {
    pendingInstallation: '开始安装',
    installing: '完成安装',
    completed: '查看详情',
    cancelled: '查看详情'
  };
  return actionMap[status] || '查看详情';
};

// 联系客户
const contactCustomer = (orderId) => {
  uni.makePhoneCall({
    phoneNumber: '13800138000',
    fail: (err) => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      });
    }
  });
};

// 处理订单操作
const handleOrderAction = (order) => {
  if (order.status === 'pendingInstallation') {
    // 开始安装
    uni.showModal({
      title: '开始安装',
      content: '确定开始安装此订单吗？',
      success: (res) => {
        if (res.confirm) {
          // 更新订单状态
          order.status = 'installing';
          uni.showToast({
            title: '已开始安装',
            icon: 'success'
          });
        }
      }
    });
  } else if (order.status === 'installing') {
    // 完成安装
    uni.navigateTo({
      url: '/pages/master/complete-installation?id=' + order.id
    });
  } else {
    // 查看详情
    uni.navigateTo({
      url: '/pages/master/order-detail?id=' + order.id
    });
  }
};

// 模拟获取订单数据
const fetchOrders = () => {
  if (activeOrderTab.value === 'all') {
    orders.value = [
      {
        id: 1,
        orderNo: 'ORD20230512001',
        time: '2023-05-12 14:30',
        location: '北京市朝阳区',
        productImage: 'https://picsum.photos/id/1060/200/200',
        productName: '现代简约防滑瓷砖 800x800mm',
        serviceType: '瓷砖安装',
        price: 300.00,
        status: 'pendingInstallation',
        customerAvatar: 'https://picsum.photos/id/64/100/100',
        customerName: '李先生'
      },
      {
        id: 2,
        orderNo: 'ORD20230511005',
        time: '2023-05-11 09:15',
        location: '上海市浦东新区',
        productImage: 'https://picsum.photos/id/1067/200/200',
        productName: '智能马桶一体机 全自动冲洗烘干',
        serviceType: '卫浴安装',
        price: 200.00,
        status: 'installing',
        customerAvatar: 'https://picsum.photos/id/65/100/100',
        customerName: '王女士'
      },
      {
        id: 3,
        orderNo: 'ORD20230510003',
        time: '2023-05-10 16:45',
        location: '广州市天河区',
        productImage: 'https://picsum.photos/id/1048/200/200',
        productName: '实木复合地板 12mm厚',
        serviceType: '地板安装',
        price: 500.00,
        status: 'completed',
        customerAvatar: 'https://picsum.photos/id/91/100/100',
        customerName: '张先生'
      }
    ];
  } else if (activeOrderTab.value === 'pendingInstallation') {
    orders.value = [
      {
        id: 1,
        orderNo: 'ORD20230512001',
        time: '2023-05-12 14:30',
        location: '北京市朝阳区',
        productImage: 'https://picsum.photos/id/1060/200/200',
        productName: '现代简约防滑瓷砖 800x800mm',
        serviceType: '瓷砖安装',
        price: 300.00,
        status: 'pendingInstallation',
        customerAvatar: 'https://picsum.photos/id/64/100/100',
        customerName: '李先生'
      }
    ];
  } else if (activeOrderTab.value === 'installing') {
    orders.value = [
      {
        id: 2,
        orderNo: 'ORD20230511005',
        time: '2023-05-11 09:15',
        location: '上海市浦东新区',
        productImage: 'https://picsum.photos/id/1067/200/200',
        productName: '智能马桶一体机 全自动冲洗烘干',
        serviceType: '卫浴安装',
        price: 200.00,
        status: 'installing',
        customerAvatar: 'https://picsum.photos/id/65/100/100',
        customerName: '王女士'
      }
    ];
  } else if (activeOrderTab.value === 'completed') {
    orders.value = [
      {
        id: 3,
        orderNo: 'ORD20230510003',
        time: '2023-05-10 16:45',
        location: '广州市天河区',
        productImage: 'https://picsum.photos/id/1048/200/200',
        productName: '实木复合地板 12mm厚',
        serviceType: '地板安装',
        price: 500.00,
        status: 'completed',
        customerAvatar: 'https://picsum.photos/id/91/100/100',
        customerName: '张先生'
      }
    ];
  } else {
    orders.value = [];
  }
};

onMounted(() => {
  // 初始化数据
  fetchOrders();

  // 监听选项卡变化，重新获取数据
  watch(activeOrderTab, () => {
    fetchOrders();
  });
});
</script>

<style scoped>
/* 选项卡样式 */
.tab-active {
  @apply inline-block py-3 px-4 text-white bg-primary rounded-t-lg font-medium transition-all duration-300 ease-in-out;
}
.tab-inactive {
  @apply inline-block py-3 px-4 text-neutral-500 hover:text-neutral-700 font-medium transition-colors duration-300 ease-in-out;
}

/* 订单卡片样式 */
.card-hover {
  @apply hover:shadow-lg transition-shadow duration-300 ease-in-out;
}

/* 按钮样式 */
.btn-primary {
  @apply bg-primary text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 ease-in-out hover:bg-primary-dark active:scale-95;
}
.btn-secondary {
  @apply bg-neutral-100 text-neutral-700 px-4 py-2 rounded-lg font-medium transition-all duration-300 ease-in-out hover:bg-neutral-200 active:scale-95;
}
.order-tabs-container {
  width: 100%;
  margin-top: 1rem;
}

/* 标签样式 */
.flex button {
  flex: 1;
  padding: 0.5rem 0;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
  border: none;
}
button:after{
  border: none;
}
.tab-inactive {
  color: #737373;
  background-color: white;
}

.tab-active {
  color: #3b82f6;
  background-color: #ffffff;
}

/* 标签指示器 */
.tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3b82f6;
  transition: all 0.3s ease;
}

/* 标签内容区域 */
.tab-content {
  padding: 1rem 0;
}

/* 标签切换动画 */
.tab-content > div {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>